import { Star } from "lucide-react";
import { cn } from "@/lib/utils";

interface FooterProps {
  isFavorites: boolean;
  title: string;
  authorLabel: string;
  createdAtLabel: string;
  disabled: boolean;
  onClick: () => void;
}

/**
 * 卡片底部组件。
 * @property {boolean} isFavorites - 表示该项目是否被标记为收藏。
 * @property {string} title - 底部显示的标题。
 * @property {string} authorLabel - 作者的标签或名称。
 * @property {string} createdAtLabel - 创建日期的标签，通常是格式化后的日期字符串。
 * @property {boolean} disabled - 是否禁用底部的某些功能或操作。
 */
export const Footer = ({
  isFavorites,
  title,
  authorLabel,
  createdAtLabel,
  disabled,
  onClick,
}: FooterProps) => {
  const handleClick = (
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
  ) => {
    event.stopPropagation();
    event.preventDefault();
    onClick();
  };

  return (
    <div className="relative bg-white p-3">
      {/* truncate 超出显示省略号 */}
      <p className="text-[13px] truncate max-w-[calc(100%-20px)]">{title}</p>
      <p className="opacity-0 group-hover:opacity-100 transition-opacity text-[11px] text-muted-foreground truncate">
        {authorLabel},{createdAtLabel}
      </p>
      <button
        disabled={disabled}
        onClick={handleClick}
        className={cn(
          "opacity-0 group-hover:opacity-100 transition absolute top-3 right-3 text-muted-foreground hover:text-blue-600",
          disabled && "cursor-not-allowed opacity-75"
        )}
      >
        <Star className={cn("w-4 h-4", isFavorites && "fill-blue-600")} />
      </button>
    </div>
  );
};
